<template>
  <div class="home-card">
    <div class="rank_right border-bottom mb-3">
      <div class="float-right py-3">
        <a
          :href="datalist.url"
          target="_blank"
        >更多</a>
      </div>
      <ul class="nav">
        <li class="nav-item">
          <a
            class="nav-link active px-0"
            :href="datalist.url"
            target="_blank"
          > {{datalist.title}}</a>
        </li>
      </ul>
    </div>
    <div class="home-card-bd">
      <div class="row no-gutters">
        <div
          class="col-6 p-1"
          v-for="item in datalist.list"
          :key="item.id"
        >
          <div class="card">
            <a
              :href="datalist.url + datalist.path+'/'+ item.id"
              target="_blank"
              :title="item.title"
            >
              <img
                :src="item.thumb"
                :alt="item.title"
              >
              <div class="title">{{item.title}}</div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pictureindex',
  data () {
    return {};
  },
  created () {
    // console.log(this.datalist);
  },
  props: {
    datalist: {
      type: Object,
      required: false,
      default: () => ({})
    },
  },
};
</script>
<style scoped>
.home-card-bd .title {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.5rem 0.25rem 0.25rem;
  overflow: hidden;
  max-height: 3.75rem;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(transparent),
    to(rgba(0, 0, 0, 0.9))
  );
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.9));
  background: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, 0.9) 100%);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9));
}
.card {
  border-radius: 0;
}
.card img {
  width: 100%;
}
.nav-item a {
  border-bottom: 0.3rem solid #007bff;
  color: #007bff !important;
  font-size: 1.4rem;
}
</style>


